<template>
    <div class="slider" :style="contentStyle">
        <div ref="childRef">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts">
 export default {
        name: 'BSlider'
    }
</script>
<script setup lang="ts">
import { ref, watch, Ref } from 'vue'

const props = defineProps({
    open: {
        type: Boolean,
        default: false
    },
    time: {
        type: [String , Number],
        default: 0.3
    },
    cubicBezier: {
        type: String,
        default: ''
    }
})
const childRef: Ref<HTMLElement | null> = ref(null)
const contentStyle = ref({
    maxHeight: '0',
    display: 'block',
    transition: `max-height ${props.time}s ${props.cubicBezier}`
})
watch(() => props.open, (v) => {
    contentStyle.value.maxHeight = `${v ? childRef.value?.offsetHeight : 0}px`
})
</script>

<style lang='less' scoped>
.slider {
    width: 100%;
    overflow-y: hidden;
}
</style>